<template>
  <div class="wrapper">
    <div class="header">
      <div class="user-info" @click="openSearch">
        <i class="iconfont icon-search"></i>
      </div>
    </div>
    <div class="scroll-view-preview">
      <div class="scroll-view-striky-title" ref="scrollViewFixedBackground"></div>
      <md-scroll-view ref="scrollView"
                      :scrolling-x="false"
                      @scroll="$_onScroll"
                      @refreshing="$_onRefresh">
        <md-scroll-view-refresh slot="refresh"
                                slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
                                :scroll-top="scrollTop"
                                :is-refreshing="isRefreshing"
                                :is-refresh-active="isRefreshActive"/>
        <div class="scroll-view">
          <div class="placeholder"></div>
          <context-menu></context-menu>
          <overview :data="overviewData"></overview>
          <rating :score-data="battleScoreData">
            <template #chart>
              <dx-e-chart ref="chartCpt" class="chart"
                          :color="['#ff9a3f']"
                          :x-axis-vertical="true"
                          :x-axis-data="chartXAxisData"
                          :series="chartSeries"/>
            </template>
          </rating>
          <satisfaction-level :satisfy-data="satisfyData"
                              ref="satisfactionLevel">
          </satisfaction-level>
        </div>
      </md-scroll-view>
    </div>
    <dx-footer-bar class="tab-bar" v-model="tabBarIndex"/>
  </div>
</template>

<script type="text/ecmascript-6">
import { ScrollView, ScrollViewRefresh, Dialog } from 'mand-mobile';
import { mapState } from 'vuex';
import { DxFooterBar, DxEChart } from '@/components';
import ContextMenu from './component/ContextMenu.vue';
import Overview from './component/Overview.vue';
import Rating from './component/Rating.vue';
import SatisfactionLevel from './component/SatisfactionLevel.vue';
import { overview, satisfy, battleScore, battleCity } from '@/api/home';

export default {
  name: 'xs-home',
  components: {
    DxFooterBar,
    DxEChart,
    ContextMenu,
    Overview,
    Rating,
    SatisfactionLevel,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh
  },
  data() {
    return {
      overviewData: {},
      satisfyData: [
        {
          key: 'line_satisfy_rate',
          name: '专线满意度',
          rate: 0,
          color: '#fcb71c',
          bgColor: '#ffecc1'
        },
        {
          key: 'open_order_return_rate',
          name: '开通满意度',
          rate: 0,
          color: '#ff84a1',
          bgColor: '#ffe1f6'
        },
        {
          key: 'complain_satisfied',
          name: '故障满意度',
          rate: 0,
          color: '#84d700',
          bgColor: '#e6fccb'
        }
      ],
      battleScoreData: [],
      chartXAxisData: [],
      chartSeries: [],
      // tabBarIndex
      tabBarIndex: 0
    };
  },
  computed: {
    ...mapState({
      customerName: state => state.user.customerName
    })
  },
  created() {
  },
  mounted() {
    this.$refs.scrollView.triggerRefresh();
  },
  methods: {
    $_onWindowResize() {
      this.$refs.scrollView.reflowScroller();
      this.$refs.satisfactionLevel.reflowBoard();
    },
    $_onScroll({ scrollTop }) {
      const el = this.$refs.scrollViewFixedBackground;
      if (scrollTop <= 0) {
        el.style.transform = `translate3d(0,${-scrollTop}px,0)`;
        el.style.webkitTransform = `translate3d(0,${-scrollTop}px,0)`;
      } else {
        el.style.transform = 'translate3d(0,0,0)';
        el.style.webkitTransform = 'translate3d(0,0,0)';
      }
    },
    $_onRefresh() {
      this.$refs.chartCpt.showLoading();
      Promise.all([
        overview(),
        satisfy(),
        battleScore(),
        battleCity()
      ]).then(resArr => {
        const [overviewData, satisfyData, battleScoreData, battleCityData] = resArr;
        this.overviewData = overviewData.success ? overviewData.data[0] : {};
        this.battleScoreData = battleScoreData.success ? battleScoreData.data : [];
        if (satisfyData.success) {
          const data = satisfyData.data[0];
          this.satisfyData.forEach((e, index) => {
            e.rate = data[e.key];
            if (this.$refs.satisfactionLevel) {
              this.$refs.satisfactionLevel.updateBoard(index, e.rate);
            }
          });
        }
        const xAxisData = [];
        const seriesData = [];
        if (battleCityData.success) {
          battleCityData.data.forEach(item => {
            xAxisData.push(item.CITY);
            seriesData.push(item.SCORE);
          });
        }
        this.chartXAxisData = [xAxisData];
        this.chartSeries = [{ type: 'line', data: seriesData }];
        this.$nextTick(() => {
          this.$refs.chartCpt.updateChart();
        });
        this.$refs.scrollView.finishRefresh();
      }).catch(err => {
        Dialog.alert({
          title: '提示',
          content: err,
          confirmText: '确定'
        });
        this.$refs.chartCpt.hideLoading();
      });
    },
    openSearch() {
      this.$router.push({
        name: 'search'
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
  .wrapper
    position : relative
    height : 100%
    padding-bottom : 100px

  .header
    position : absolute
    top : 0
    left : 0
    z-index : 1
    width : 100%
    padding : 20px
    background : url("./home_bg.png") no-repeat
    background-size : 100% auto

    .user-info
      display : flex
      align-items : center
      padding : 10px
      height : 80px
      background : rgba(255, 255, 255, .7)
      border-radius : 20px

      .icon-search
        position : absolute
        right : 44px
        font-size : 44px
        color : #fff

  .scroll-view-preview
    padding-top : 120px
    height : 100%

  .scroll-view
    padding : 0 20px

    &:before
      content : ''
      display : block
      height : 180px

  /* background : url("./home_bg.png") no-repeat 0 -120px
  background-size : 100% auto */

  .scroll-view-striky-title
    position : absolute
    top : 120px
    left : 0
    bottom : 100px
    width : 100%
    background : url("./home_bg.png") no-repeat 0 -120px
    background-size : 100% auto

  .tab-bar
    position : absolute
    bottom : 0
    left : 0
    width : 100%

  .scroll-view-item
    padding : 30px 0
    text-align : center
    font-size : 28px
    border-bottom : .5px solid #efefef

</style>
